<template>
    <div class="table_top">
        <el-select v-model="ruleForm" :placeholder="placeholder" size="small" >
            <el-option  label="全部科室" :value="''"></el-option>
            <el-option v-for="(item,index) in allSelect" :key="index" :label="item" :value="item"></el-option>
        </el-select>
        <el-input style="width:250px" type="age" v-model="value" autocomplete="off" size="small" :placeholder="placeholderinp" ></el-input>
        <el-button type="primary" @click="seachName" size="mini">搜索</el-button>
    </div>
</template>
<script>
export default {
    props:{
        placeholder:{
            type: String,
            default: ''
        },
        placeholderinp:{
            type: String,
            default: ''
        },
        allSelect:{
            type: Array,
            default: function(){
                return []
            }
        }
    },
    methods:{
        seachName(){
            this.$emit('seachName', this.value)
        }
    },
    data(){
        return {
            ruleForm: '',
            value: ''
        }
    },
    watch:{
        ruleForm:{
            handler(newVal){
                this.$emit('selectOption',newVal)
            }
        },
        value:{
            handler(newVal){
                this.$emit('seachValue',newVal)
            }
        }
    }
}
</script>
<style lang="scss" >
.table_top{
    padding-bottom: 20px;
    display: flex;
    width: 50%;
    justify-content: space-between;
    button.btn-prev,button.btn-next{
            border: 1px solid;
        }
        .el-select input.el-input__inner{
            width: 150px;
        }
}
</style>